<template>
	<view class="login">
		<head-navigation :back-is-show="1"  :is-back="1" :background-color="'#fff'"></head-navigation>
		<view class="login_box">
			<view class="login_box_title">绑定手机</view>
			<view class="input_box">
				<view class="input_box_li">
					<input type="number" value="" placeholder="请输入手机号" maxlength="11" v-model="phone"
						placeholder-class="placeholder_class" />
				</view>
				<view class="input_box_li" >
					<input type="number" maxlength="6" value="" placeholder="请输入验证码" v-model="smscode"
						placeholder-class="placeholder_class" />
					<verificationCode2 :seconds="seconds" ref="verCode" @openAgreeWith='openAgreeWith' @start="start" @end="end" :phone="phone" v-model="status" >
					</verificationCode2>
				</view>
			</view>
			
			<view class="button_box">
				<view class="button_name" v-if="status && phone != '' && smscode != '' " @click="realName">绑定并登录</view>
				<view class="button_name button_name_no" v-else @click="effective">绑定并登录</view>
			</view>
			<view class="gou" @click="gouFunc">
				<view class="image-box" >
					<image :src="status?'/static/login/gou.png':'/static/login/gou_no.png'" mode="widthFix"></image>
				</view>
				<text>我已同意<text @click.stop="jumptext(2)">《神椰隐私保护协议》</text>和<text @click.stop="jumptext(1)">《神椰用户服务协议》</text></text>
			</view>
		</view>
		<view class="login_word">
			<text>绑定手机号后,下次登录可直接使用微信登录,</text>
			<text>无需再次绑定，在“设置一微信登录”可解除微信绑定</text>
		</view>
		
		<uni-popup ref="propDialog" type="center" mask-background-color="rgba(0,0,0,0.6)">
			<view class="prop_box">
				<view class="prop_title">服务协议及隐私政策</view>
				<view class="prop_content">在您注册/登录神椰账号的过程中，您需要阅读并同意《神椰隐私保护协议》和《神椰用户服务协议》。请务必仔细阅读，充分理解条款内容后再同意。</view>
				<view class="prop_line"></view>
				<view class="prop_agreement">
					<text class="agreement_text">点击同意即表示您已阅读并同意</text>
					<text class="agreement_word" @click="jumptext(2)">《神椰隐私保护协议》</text>
					<text class="agreement_text">和</text>
					<text class="agreement_word" @click="jumptext(1)">《神椰用户服务协议》</text>
				</view>
				<view class="prop_b">
					<view class="prop_txt" @click="disagree">不同意</view>
					<view class="prop_txt prop_txt2" @click="agreeWith">同意</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		wealthInfo
	} from '@/api/wallet.js'
	const app = getApp()
	import verificationCode2 from '../components/verification-code2.vue'
	export default {
		data() {
			return {
				msg: '获取验证码',
				smscode: '',
				phone: '',
				status: false,
				seconds: 60, //倒计时时间
				wxData:'',
				linkJump:'',
			}
		},
		components:{
			verificationCode2
		},
		onLoad(e) {
			this.wxData = this.$queue.getData('wxData')
            this.linkJump = e.linkJump
		},
		onShow() {

		},
		methods: {
			// 打开弹窗
			openAgreeWith(e){
				if(e == 1){
					this.clickStatus = 2
					this.$refs.propDialog.open()
				}else if(e == 2){
					this.status = true
				}
			},
			// 弹窗 同意
			agreeWith(){
				this.status = true
				this.disagree()
				if(this.clickStatus == 2){
					this.$refs.verCode.changeStatus(this.status)
				}
			},
			// 不同意
			disagree(){
			  this.$refs.propDialog.close()
			},
			jumptext(e){ //1:隐私协议，2：服务协议
				this.disagree()
				uni.navigateTo({
					url:'/pages/login/text-box?type=' + e
				})
			},
			// 效验参数
			effective() {
				if (this.phone == '') {
					this.$queue.showToast('请输入手机号码');
					return false;
				} else if (this.smscode == '') {
					this.$queue.showToast('请输入手机验证码');
					return false;
				} else if (!this.status) {
					this.$queue.showToast('请勾选协议');
					return false;
				}
			},
			// 倒计时
			async start() { //获取验证码
				let phone = this.phone
				const res = await this.$api.sendCodeBtn(phone);
				this.$queue.setData('tel',this.phone)
				uni.showToast({
					icon: 'none',
					title: '发送成功,请注意查看短信'
				})
			},
			async realName() {
				var data = {
					phone:this.phone,
					code: this.smscode,
					data: this.wxData,
					source:1
				}
				uni.showLoading({
					title: '登录中'
				})
				
				try {
					const res = await this.$api.loginSmsWxBind(data);
					this.$queue.setData('token', res.result.token)
					this.$queue.setData('isRealName', res.result.isRealName)
					this.$queue.showToast('登录成功')
					uni.removeStorageSync("loginSendTime2")
					uni.removeStorageSync("wxData")
					// 获取钱包信息
					wealthInfo().then(wInfo=>{
						var customer = wInfo.result
						this.$queue.setData('walletYF',customer.yf)
						this.$queue.setData('walletCoCo',customer.coco)
					})
					// 判断是否有链接转跳
					if(this.linkJump == 2){
						setTimeout(() => {
							// var curRoute = JSON.parse(decodeURIComponent(uni.getStorageSync('linkJump')))
							// // 防止微信静默 登录url 出错
							// if(curRoute.indexOf('/pages/login/login') > -1){
							// 	curRoute = '/pages/index/index'
							// }
							// uni.reLaunch({
							// 	url: curRoute
							// })
							this.jumpToPage()
						}, 800)
					}else{ 
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 800)
					}

				} catch {
					// uni.hideLoading()
				} finally {
					// setTimeout(() => {
					// 	uni.hideLoading()
					// }, 2000)
				}

			},
			end() {
				console.log('结束')
			},
			// 跳转页面
			jumpToPage(){
				var curRoute = JSON.parse(decodeURIComponent(uni.getStorageSync('linkJump')))
				// 防止微信静默 登录url 出错
				if(curRoute.indexOf('/pages/login/login') > -1){
					curRoute = app.globalData.homePage
					uni.reLaunch({
						url: curRoute
					})
				}else if(app.globalData.tabBarList.findIndex(obj => curRoute.indexOf(obj) > -1) > -1){
					uni.reLaunch({
						url: curRoute
					})
				}else{
					uni.navigateTo({
						url: curRoute
					})
				}
			},
			gouFunc() {
				this.clickStatus = 1
				if(this.status){
					this.status = false
				}else{
					this.$refs.propDialog.open()
				}
			},
		}
	}
</script>

<style scoped>
	.login {
		width: 750rpx;
		min-height: 100vh;
		background: #FFFFFF;
		background-size: 100% 100%;
		box-sizing: border-box;
	}

	.login_box {
		width: 750rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.input_box .input_box_li {
		width: 100%;
		padding: 0 38rpx;
		box-sizing: border-box;
		height: 100rpx;
		margin-top: 40rpx;
		border: 2rpx solid #E0E0E0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		/* box-shadow: 0rpx 8rpx 18rpx #DDE1EA; */
		border-radius: 200rpx;
	}
	.input_box .input_box_li input{
		width: 100%;
	}
	.input_box .input_box_li:nth-child(2) input {
		width: 50%;

	}

	.input_box_li .placeholder_class {
		font-weight: 400;
		font-size: 34rpx;
		line-height: 48rpx;
		color: #ACAEB9;
	}

	.gou {
		font-size: 24rpx;
		color: #333333;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30rpx;
	}

	.image-box {
		width: 24rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.gou image {
		width: 22rpx;
		height: 22rpx;
		/* margin-top: 4rpx; */
	}
	.gou text{
		flex: 1;
	}
	/* 登录按钮 */
	.button_box {
		margin-top: 140rpx;
	}

	.button_name {
		width: 100%;
		height: 100rpx;
		margin: 0 auto;
		background: rgba(255, 37, 33, 1);
		border-radius: 16rpx;
		font-size: 32rpx;
		color: #fff;
		line-height: 100rpx;
		text-align: center;
		margin-top: 36rpx;
		border-radius: 400rpx;
	}

	.button_name_no {
		background: rgba(204, 204, 204, 1) !important;
	}
	.login_box_title{
		width: 100%;
		box-sizing: border-box;
		padding: 58rpx 52rpx 12rpx 52rpx;
		font-size: 40rpx;
		font-weight: bold;
		line-height: 44rpx;
		color: #222222;
	}
	
	/* 底部文字 Star*/
	.login_word{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-weight: 400;
		line-height: 44rpx;
		margin-top: 350rpx;
	}
	/* 底部文字 end */
	
	/* 弹窗 */
	.prop_box {
		width:650rpx;
		border-radius: 24rpx;
		background-color: #fff;
		padding-bottom: 50rpx;
	}
	.prop_title{
		font-size: 32rpx;
		font-weight: 600;
		line-height: 44rpx;
		color: #222222;
		width: 100%;
		text-align: center;
		padding: 40rpx 0;
	}
	.prop_content{
		font-size: 30rpx;
		font-weight: 400;
		line-height: 52rpx;
		letter-spacing: 0em;
		padding: 0 38rpx;
	}
	.prop_line{
		width: 610rpx;
		border-bottom: 2rpx solid #EBEBEB;
		margin: 24rpx auto;
	}
	.prop_agreement{
		padding: 0 38rpx;
		font-size: 30rpx;
		font-weight: 400;
		line-height: 52rpx;
		color: #222222;
	}
	.agreement_word{
		color: #A60F0B;
	}
	.prop_b {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: center;
		margin-top: 40rpx;
	}
	
	.prop_txt {
		width: 220rpx;
		height: 70rpx;
		color: #222222;
		background: #F2F2F2;
		font-size: 32rpx;
		text-align: center;
		line-height: 70rpx;
		border-radius: 6rpx;
	}
	
	.prop_txt2 {
		margin-left: 74rpx;
		color: #FFFFFF;
		background: linear-gradient(90deg, #FF2521 0%, #FF4743 98.24%);
	}
	/* end */
</style>
